import React, { useState } from 'react';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { obj_str, More, utc_dt, loc_dt, get_time, ClientView, is_empty, PanelTitle, Ret } from '../../nui';
import { loc } from '../../local';

/* data = [{
 *  des: "xx",
 *  value: "xx",
 *  end: "xx",
 *  ext: "xx",
 * }]
*/
const InfoList = ({ tool=null, data, hcmd, cur=null, hcur, className, bd=null }) => {
    if (is_empty(data)) {
        return null;
    }

    const get_value = (d) => {
        if (!d.value) {
            return "";
        }

        if (!d.t) {
            return d.value;
        }

        if (d.t === "cmd") {
            return d.hcmd();
        }
        else if (d.t === "utc") {
            return utc_dt(d.value);
        }
        else if (d.t === "time") {
            let t = new Date(d.value);
            return loc_dt(t);
        }
        else if (d.t === "s") {
            let t = get_time(parseInt(d.value));
            return t[3];
        }
        else if (d.t === "%") {
            if (is_empty(d.value)) {
                return "";
            }

            return d.value + "%";
        }
    };

    const hselect = (uid) => {
        hcur(uid);

        if (hcmd) {
            hcmd(uid);
        }
    };

    const get_cmd = (v) => {
        if (!hcmd) {
            return null;
        }

        if (v.uid) {
            return (
                <div className="table-cell">
                    <More hcmd={hselect} uid={v.uid} pos="right-start"/>
                </div>
            );
        }

        return null;
    };

    const item = data.map((d, i) => {
        let st = d.uid === cur ? " text-indigo-600" : "";
        if (bd) {
            st += ` ${bd}`;
        }

        return (
            <div className="table-row" key={`lst${i}`}>
                <div className={"py-1 text-right table-cell" + st}>{obj_str(d, "des")}</div>
                <div className={"px-6 py-1 table-cell" + st}>{get_value(d)}</div>
                <div className={"py-1 table-cell" + st}>{obj_str(d, "end")}</div>
                <div className={"py-1 pl-6 table-cell" + st}>{obj_str(d, "ext")}</div>
                {get_cmd(d)}
            </div>
        );
    });

    return (
        <div className={className}>
            {tool}
            <div className="my-2 table">
                {item}
            </div>
        </div>
    );
};

const TabPanel = ({ children, value, index }) => (
    <Typography component="div" role="tabpanel" hidden={value !== index}>
        <Box p={3}>{children}</Box>
    </Typography>
);

const InfoView = ({ title, hreturn, data, cview, def, cl="orange" }) => {
    const [value, setValue] = useState(def);

    let head = [];
    let panel = [];
    for (let i = 0; i < data.length; i++) {
        const d = data[i];

        head.push(<Tab value={d.index} label={d.label} key={"head" + d.index} id={`tab${i}`}/>);

        const View = () => (
            <TabPanel value={value} index={d.index}>
                {d.view}
            </TabPanel>
        );
        panel.push(<View key={"panel" + d.index}/>);
    }

    const Left = () => {
        if (!title) {
            return null;
        }

        return <div className="mt-2">{title}</div>;
    };

    const Right = () => {
        if (hreturn) {
            return <Ret hcmd={hreturn}/>;
        }

        return null;
    };

    return (
        <div className="w-full">
            <PanelTitle left={<Left/>} right={<Right/>} cl={cl}/>
            <div className="mx-4 mt-3">
                <Tabs
                    value={value}
                    onChange={(e, v) => setValue(v)}
                    centered
                    indicatorColor="primary"
                    textColor="primary">
                    {head}
                </Tabs>
                <ClientView mhigh={240}>
                    {panel}
                </ClientView>
            </div>
        </div>
    );
};

const InfoMain = ({ data, info }) => {
    if (!data) {
        return null;
    }

    let d = [];

    if (data.sn) {
        d.push({des: loc("bh"),   value: data.sn});
    }

    if (data.name) {
        d.push({des: loc("mc"),   value: data.name});
    }

    if (!is_empty(info)) {
        info.forEach(t => d.push({des: t.des, value: data[t.value], t: t.t}));
    }

    return <InfoList data={d}/>;
};

export {InfoMain, InfoView, InfoList};
